<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>数据表格</title>
    <link href="../../assets/css/pearone.css" rel="stylesheet" />
    <link href="../../component/layui/css/layui.css" rel="stylesheet" />
    <link href="../../admin/css/pearButton.css" rel="stylesheet"/>
    <link href="../../admin/css/pearTable.css" rel="stylesheet"/>
    <link href="../../admin/css/pearCommon.css" rel="stylesheet"/>
    <style>
        body{
            margin:10px;
            background: whitesmoke;
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="javascript:void(0);">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">角色名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" id="date1" hover autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">Key 值</label>
                    <div class="layui-input-inline">
                        <input type="text" name="code" hover autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <button type="submit" class="pear-btn pear-btn-md pear-btn-primary layui-icon layui-icon-search"  lay-submit="" lay-filter="select">&nbsp;查询</button>
                        <button type="reset" class="pear-btn pear-btn-md pear-btn-primary layui-icon layui-icon-refresh" plain>&nbsp;重置</button>
                     </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">

        <table id="roleTable" lay-filter="roleTable"></table>

        <script type="text/html" id="barDemo">
            <button class="layui-icon layui-icon-edit pear-btn pear-btn-primary pear-btn-sm"  lay-event="edit" />
            <button class="layui-icon layui-icon-link pear-btn pear-btn-warming pear-btn-sm"  lay-event="power" />
            <button class="layui-icon layui-icon-delete pear-btn pear-btn-danger pear-btn-sm"  lay-event="del" />
        </script>

        <script type="text/html" id="toolbar">
            <button class="layui-icon layui-icon-add-1 pear-btn pear-btn-primary pear-btn-md"  lay-event="add">&nbsp;新增</button>
            <button class="layui-icon layui-icon-delete pear-btn pear-btn-danger pear-btn-md"  lay-event="del">&nbsp;批量删除</button>
        </script>

        <!--字段格式化-->
        <script type="text/html" id="status">
            <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" {{ d.status == 0 ? 'checked' : '' }}>
        </script>
    </div>
</div>

<script src="../../component/layui/layui.js"></script>
<script type="text/javascript" th:inline="none">
    layui.use(['layer','form','table','jquery','operate'], function() {
        var layer = layui.layer
            ,table = layui.table
            ,$ = layui.jquery
            ,form = layui.form
            ,operate = layui.operate;

        table.render({
             elem: '#roleTable',
             url: '/system/role/data'
            ,title: '角色表'
            ,method:'post'
            ,skin:'line'
            ,page: true
            ,defaultToolbar: [{title: '刷新',layEvent: 'refresh',icon: 'layui-icon-refresh'},'filter', 'exports', 'print']
            ,toolbar: "#toolbar"
            ,cols: [[ //表头
                    {type: 'checkbox'},
                    {field: 'name', title: '名称', width: 200},
                    {field: 'code', title: 'key 值'},
                    {field: 'status', title: '状态', templet: '#status'},
                    {field:'description', title:'描述'},
                    {width: 180, title:'操作', align: 'center', toolbar: '#barDemo'}
            ]]
        });

        table.on('toolbar(roleTable)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id),
                data = checkStatus.data;
            switch (obj.event) {
                case 'add':
                    operate.open("角色添加","/system/role/add", {width:'450px',height:'380px'});
                    break;
                case 'del':
                    operate.removeByIds('/system/role/deleteByIds',operate.arrayToStr(data),'roleTable');
                    break;
                case 'refresh':
                    table.reload('roleTable');
                    break;
            };
        });

        table.on('tool(roleTable)', function(obj) {
            var data = obj.data
               ,layEvent = obj.event;
            if (layEvent === 'del') {

                operate.removeById('/system/role/deleteById',data['id'],'roleTable');

            } else if (layEvent === 'edit') {

                operate.open("角色修改","/system/role/edit?id="+data['id'], {width:'450px',height:'380px'});

            } else if(layEvent === 'power'){

                operate.open("权限分配","/system/role/power?id="+data['id'],{width:'278px',height:'400px'});
            }
        });

        form.on('switch(status)', function(obj){
            if(obj.elem.checked){

                operate.put('/system/role/enable/'+obj.value,null,function(result){

                    console.log("选中");
                })

            }else{

                operate.put('/system/role/disable/'+obj.value,null,function(result){

                    console.log("未选中")

                })

            }
        });

        form.on('submit(select)', function(data){
            table.reload('roleTable', {where: data.field,page: {curr: 1}});
        });
    });
</script>
</body>
</html>